import QtQuick 1.0
import "../Util/Util.js" as Util


Rectangle {
    id: _item
    width: 200
    height: _title.font.pixelSize * 2.5
    gradient: Gradient {
        GradientStop {
            id: _grad1
            position: 0
            color: "#00000000"
        }
        GradientStop {
            id: _grad2
            position: 1
            color: "#00000000"
        }
    }
    border.color: "#00000000"

    property int itemIndex: -1
    property alias itemTitle: _title.text

    property alias acceptedButtons: _mouseArea.acceptedButtons

    signal clicked(int itemIndex, variant mouse)

    Text {
        id: _title
        color: "#dddddd"
        anchors.centerIn: parent
        font.pointSize: 12
        wrapMode: "WordWrap"

        onTextChanged: {
            if(text === "-"){
                font.pixelSize = 2;
                _title.visible = false;
                _line.visible = true;
            }else{
                font.pointSize = 12;
                _title.visible = true;
                _line.visible = false;
            }
        }
    }

    Rectangle{
        id: _line
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 5
        anchors.rightMargin: 5
        anchors.verticalCenter: parent.verticalCenter
        color: "#aaaaaa"
        height: 1
        visible: false
    }

    MouseArea {
        id: _mouseArea
        anchors.fill: parent
        hoverEnabled: true

        //クリック時にハイライトさせる
        onPressed: {
            if(_title.text === "-"){
            }else{
                _item.state = "pressed";
            }
        }
        onReleased: {
            _item.state = "";
        }

        //マウスオーバー
        onEntered: {
            if(_title.text === "-"){
            }else{
                _item.state = "hover";
            }
        }
        onExited: {
            _item.state = "";
        }

        //クリック
        onClicked: {
            if(_title.text === "-"){
            }else{
                _item.clicked(itemIndex, mouse);
            }
        }
    }

    states: [
        State {
            name: "pressed"
//            when: _item.pressed
            PropertyChanges { target: _grad1; color: "#005555ff" }
            PropertyChanges { target: _grad2; color: "#33dd0000" }
        },
        State {
            name: "hover"
            PropertyChanges { target: _grad1; color: "#005555ff" }
            PropertyChanges { target: _grad2; color: "#33ffffff" }
        }

    ]


}
